@use '@/styles/gobal.scss' as *;

.home {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #f0f2f5;

    &__main {
        flex: 1;
        display: flex;
        height: 100%;
    }

    &__content {
        flex: 1;
        padding: pxToRem(24);
        // padding-bottom: pxToRem(24);
        padding-bottom: 0;
        overflow: auto;
        background-color: #f2f2f2;
        margin: pxToRem(16);
        margin-right: 0;
        border-radius: pxToRem(4) 0 0 pxToRem(4);
    }
}

// 首页区域
.front {

    // display: flex;
    &__items {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: pxToRem(16);
    }

    &__emptyResult {
        width: 100%;
        text-align: center;
        padding: 40px;
        color: #999;
        font-size: 16px;
        background: #f5f5f5;
        border-radius: 8px;
        margin: 20px 0;
    }
}

// .userManagement {
//     width: fit-content;

//     h1 {
//         margin-bottom: 24px;
//         color: #333;
//         font-size: 24px;
//     }
// }

// 用户区域
.user {
    width: fit-content;

    &__table {
        background: #fff;
        border-radius: pxToRem(4);

        &Header {
            display: flex;
            align-items: center;
            background-color: #fafafa;
            border-bottom: pxToRem(1) solid #e8e8e8;
        }

        &Cell {
            height: pxToRem(60);
            padding: 0 pxToRem(16);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            color: #333;
            border-right: pxToRem(1) solid #e8e8e8;

            &:nth-child(1) {
                width: pxToRem(60);
            }

            // 序号
            &:nth-child(2) {
                width: pxToRem(120);
            }

            // 用户名
            &:nth-child(3) {
                width: pxToRem(80);
            }

            // 头像
            &:nth-child(4) {
                width: pxToRem(60);
            }

            // 性别
            &:nth-child(5) {
                width: pxToRem(120);
            }

            // 手机号
            &:nth-child(6) {
                width: pxToRem(200);
            }

            // 个人简介
            &:nth-child(7) {
                width: pxToRem(100);
            }

            // 用户角色
            &:nth-child(8) {
                width: pxToRem(120);
            }

            // 登录账号
            &:nth-child(9) {
                width: pxToRem(120);
            }

            // 登录密码
            &:nth-child(10) {
                width: pxToRem(80);
                border-right: none;
            }

        }

        &Body {}
    }
}

.goods {
    width: fit-content;

    &__table {
        background: #fff;
        border-radius: pxToRem(4);

        &Header {
            display: flex;
            align-items: center;
            background-color: #fafafa;
            border-bottom: pxToRem(1) solid #e8e8e8;
        }

        &Cell {
            height: pxToRem(60);
            padding: 0 pxToRem(16);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            color: #333;
            border-right: pxToRem(1) solid #e8e8e8;

            &:nth-child(1) {
                width: pxToRem(60);
            }

            // 序号
            &:nth-child(2) {
                width: pxToRem(120);
            }

            // 物品名称
            &:nth-child(3) {
                width: pxToRem(200);
            }

            // 物品描述
            &:nth-child(4) {
                width: pxToRem(100);
            }

            // 物品图片
            &:nth-child(5) {
                width: pxToRem(120);
            }

            // 物品地点
            &:nth-child(6) {
                width: pxToRem(100);
            }

            // 物品状态
            &:nth-child(7) {
                width: pxToRem(100);
            }

            // 物品类别
            &:nth-child(8) {
                width: pxToRem(160);
            }

            // 发布时间
            &:nth-child(9) {
                width: pxToRem(100);
            }

            // 发布人
            &:nth-child(10) {
                width: pxToRem(80);
                border-right: none;
            }

            // 操作
        }

        &Body {
            max-height: calc(100vh - pxToRem(200));
            overflow-y: auto;

            &::-webkit-scrollbar {
                width: pxToRem(6);
                height: pxToRem(6);
            }

            &::-webkit-scrollbar-thumb {
                background: #ccc;
                border-radius: pxToRem(3);
            }

            &::-webkit-scrollbar-track {
                background: #f1f1f1;
            }
        }
    }
}

// 数据统计区域
.stats {
    padding: $spacing-lg;

    &__cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: $spacing-lg;
        margin-bottom: $spacing-xl;
    }

    &__charts {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: $spacing-lg;
    }
}